<template>
  <div class="home">
    <set-real-time></set-real-time>

    <div class="welcome">
        <p>欢迎进入</p>
        <p>数字档案室应用系统</p>
    </div>

    <div class="desk">
      <ul>
        <li v-for="(item, index) in showListData"
            @click="handleClick(item)"
            :key="index">
          <p>{{item.label}}</p>
          <div class="img-box">
            <img :src="item.iconImg" alt="" />
          </div>
        </li>
      </ul>

      <img :src="require('@/assets/home/home-desk.png')" alt="" />
    </div>

  </div>
</template>

<script>
import { mapActions } from 'vuex'
import SetRealTime from './component/setRealTime'
import { mapFields } from 'vuex-map-fields'

export default {
  name: 'Home',
  components: { SetRealTime },
  data () {
    return {
      menu: [{
        label: '',
        path: 'electronicsFile',
        iconImg: require('@/assets/home/da.png')
      }, {
        label: '',
        path: 'electronicsArchives',
        iconImg: require('@/assets/home/dzda.png')
      }, {
        label: '',
        path: 'digitization',
        iconImg: require('@/assets/home/szhda.png')
      }, {
        label: '',
        path: 'utilizeQuery',
        iconImg: require('@/assets/home/query.png')
      }]
    }
  },
  mounted () {
    this.setNavNarrow(true)
  },
  computed: {
    ...mapFields('profile/leftNav', {
      navList: 'retrieved'
    }),
    showListData () {
      const list = []
      if (this.navList) {
        this.navList.map(items => {
          items.children.map(children => {
            this.menu.map(item => {
              if (children.path.indexOf(item.path) > -1) {
                item.path = children.path
                list.push({
                  path: children.path,
                  label: children.menuName,
                  iconImg: item.iconImg
                })
              }
            })
          })
        })
      }
      return list
    }
  },
  methods: {
    ...mapActions('profile/navNarrow', ['setNavNarrow']),
    handleClick (item) {
      if (item.path) {
        this.$router.push({
          path: item.path,
          query: {}
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  @import "../../../styles/mixin";

.home{
  background: url("../../../assets/home/home-bg.png") no-repeat center center;
  background-size: cover;
  height: calc(100% + 20px);
  margin: -10px -20px;
  overflow-y: auto;
  min-height: 650px;
  position: relative;

  .welcome{
    text-align: center;
    color: #fff;
    letter-spacing: 2px;
    margin-top: 60px;

    p{
      font-size: 36px;
      font-weight: bolder;
      margin: 10px 0;
      text-shadow: 3px 3px 3px #333;
      span{
        font-size: 26px;
      }
    }
  }

  .desk{
    text-align: center;
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    ul{
      @include fj(center);
      align-items: center;
      width: 755px;
      margin: 0 auto;
      position: relative;
      bottom: -15px;
      li{
        margin: 0 30px;
        text-align: center;
        width: 80px;
        cursor: pointer;
        &:hover{
          opacity: 0.7;
        }
        p{
          color: #fff;
          font-weight: bolder;
          font-size: 16px;
          margin-bottom: 12px;
        }
        .img-box{
          @include imgBox(64px, 62px);
          margin-left: 10px;
        }
      }
    }
  }

}

</style>
